<html>
<head>
<script>
var data2 = {
    Sel1: {
        "__Root__":["aaa","bbb","ccc"]
    },
    Sel2: {
        "bbb":["bbb1","bbb2","bbb3"],
        "ccc":["ccc1","ccc2","ccc3"]
    },
    Sel3: {
        "bbb2":["bbb21","bbb22","bbb23"],
        "bbb3":["bbb31","bbb32"],
        "ccc1":["ccc11","ccc12","ccc13","ccc14"]
    }
};


function set(oThis) {
    var len = arguments.length;
    var ar = data2[arguments[1]];
    var oSel = document.getElementById(arguments[1]);

    oSel.length = 0;

    //表示カラムを選択
    var op;
    if (ar["__Root__"] != null) {
        op = ar["__Root__"];
    }
    else {
        op = ar[oThis.options[oThis.selectedIndex].value];
    }
    //選択肢を設定
    if (op) {
        oSel.options[0] = new Option("== Select ==","== Select ==");
        for (var j=0;j < op.length;j++) {
            oSel.options[j+1] = new Option(op[j],op[j]);
        }
    }
    //後ろの選択を無しに初期化
    for (var i=2;i < len;i++) {
        alert("clear="+arguments[i]);
        oSel = document.getElementById(arguments[i]);
        oSel.length = 0;
    }
}

function dsp() {
    var s = "";
    var a = ["Sel1","Sel2","Sel3"];
    for (var i=0;i < a.length;i++) {
        var o = document.getElementById(a[i]);
        s += a[i]+"="+o.options[o.selectedIndex].value+"&";
    }
}

</script>
</head>
<body onload="set(this,'Sel1','Sel2','Sel3')">
<select id="Sel1" style="width:100" onchange="set(this,'Sel2','Sel3')"></select>
<select id="Sel2" style="width:100" onchange="set(this,'Sel3')"></select>
<select id="Sel3" style="width:100" onchange="dsp('Sel1','Sel2','Sel3')"></select>
</body>
</html>
